<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="add">设置</button>
    <button class="get">获取</button>
    <button class="edit">修改</button>
    <button class="del">删除</button>
    <button class="key">遍历</button>
</body>
<script>
    // cookie的缺点
    // cookie的缺点主要集中于安全性和隐私保护
    // 1. cookie可能被禁用
    // 2. cookie不能跨浏览器 / 不能跨网站
    // 3. cookie可能被删除
    // 4. cookie安全性不够高
    // 5. 在浏览器向服务器发送请求时  cookie会随着请求(请求可以携带一定的数据)一同发送给服务器, 会影响请求和响应的速率  (优点: 可以携带一部分数据 缺点: 有cookie,必须带)
    // 6. cookie 存储大小为4k ,  cookie的存储条数 一般为50条


    // WebStorage  网页存储(H5新增)
    // WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

    // WebStorage两个主要目标：
    // 1.提供一种在cookie之外存储会话数据的路径  (一种新的在用户本地 存储数据的方式)
    // 2.提供一种存储大量可以跨会话存在的数据的机制  (webStorage也可以跨页面访问 )
    // HTML5的WebStorage提供了两种API：localStorage（本地存储）和  sessionStorage（会话存储）

    // 注意:
    // 1. WebStorage数据默认存储在站点的根目录 => 站点下的所有页面均可以访问
    // 2. 官方提供了操作数据的API(属性和方法),也可以使用对象的相关语法 新增,删,修改,查找
    // 3. localStorage（本地存储）和  sessionStorage 虽然是对象  => 但是它的键值只能为字符串类型 => 其他类型会隐式转字符串  => 解决方法同cookie
    
    // 如何查看localStorage（本地存储）和  sessionStorage（会话存储）
    // 1. 手动查看(代码调试) => 开发者工具 => application => Storage  => localStorage/sessionStorage（会话存储）

    // 2. JS查看  => localStorage/sessionStorage  全局对象,可以直接访问

    // 官方提供了操作数据的API(属性和方法)
    // length   保存数据的数量
	// setItem(key, value) —— 保存数据，以键值对的方式存储信息
	// getItem(key) —— 获取数据，将键值传入，即可获取到对应的value值
	// removeItem(key) —— 删除单个数据，根据键值移除对应的信息
	// clear() —— 删除所有的数据
	// key(index) —— 获取某个索引的key

    // 也可以使用对象的相关语法 新增,删,修改,查找

    console.log(window.localStorage);
    // console.log(window.sessionStorage);


    var addBtn = document.getElementsByClassName("add")[0];
    var getBtn = document.getElementsByClassName("get")[0];
    var editBtn = document.getElementsByClassName("edit")[0];
    var delBtn = document.getElementsByClassName("del")[0];
    var keyBtn = document.getElementsByClassName("key")[0];


    addBtn.onclick = function(){
        localStorage.setItem("user","a123123");
        localStorage.setItem("pwd","123123");
        localStorage.phone="17386141517"
        localStorage.email="123123@qq.com";

        // 存数组和对象之前 先转化为JOSN字符串,在存储(存储的是json字符串)
        var arr = [1,2,3];
        var obj = {a:1,b:2};
        localStorage.setItem("arr", JSON.stringify(arr));
        localStorage.setItem("obj", JSON.stringify(obj));

        console.log(window.localStorage);
    }

    getBtn.onclick = function(){
        console.log(localStorage.getItem("user"));
        console.log(localStorage.getItem("pwd"));
        console.log(localStorage.phone);
        console.log(localStorage.email);

        // 直接取值是json字符串
        // console.log(localStorage.getItem("arr"));
        // console.log(localStorage.obj);

        // 直接取值是json字符串  先解析为数组或对象再使用
        var arr1 = JSON.parse(localStorage.getItem("arr"));
        console.log(arr1);
        var obj1 = JSON.parse(localStorage.obj);
        console.log(obj1);
    }
 
    editBtn.onclick = function(){
        localStorage.setItem("user","bbb123123");
    }

    delBtn.onclick = function(){
        // 单删
        // localStorage.removeItem("user");
        // localStorage.removeItem("pwd");
        // delete localStorage.phone;
        // delete localStorage.email;
        // delete localStorage.arr;
        // delete localStorage.obj;

        // clear() 全删
        localStorage.clear();
    }

    keyBtn.onclick = function(){

        // for ... in 遍历localStorage(对象)   => 会出现对于属性
        // for(var key in localStorage){
        //     console.log(key);
        // }

        // key() 传入一个下标,返回下标对应的key
        for(var i=0;i<localStorage.length;i++){
            var key = localStorage.key(i);
            console.log(key,localStorage.getItem(key),localStorage[key]);
        }


    }



</script>
</html>